<template>
  <div class="app-container">
    <!--    头部-->
    <div class="my-detail-header">
      <div>
        <span style="
    font-size: x-large;
    margin-right: 5px;
    font-weight: bolder;
    vertical-align: middle;"
        >{{ form.wtaskName }}</span>
        <span style="color: #606266">{{ form.wtaskCode }}</span>
      </div>
    </div>

    <div class="my-detail-body">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">工单信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单编号">
              {{ proWorkOrder.workOrderCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工单名称">
              {{ proWorkOrder.workOrderName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品名称">
              {{ proWorkOrder.gbsGood ? proWorkOrder.gbsGood.pdName : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品编号">
              {{ proWorkOrder.gbsGood ? proWorkOrder.gbsGood.pdCode : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="规格型号">
              {{ proWorkOrder.gbsGood ? proWorkOrder.gbsGood.pdSpecType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="产品类型">
              {{ proWorkOrder.gbsGood ? proWorkOrder.gbsGood.pdGoodType : '' }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="单位">
              {{ proWorkOrder.gbsGood && proWorkOrder.gbsGood.gbsGoodUnit ? proWorkOrder.gbsGood.gbsGoodUnit.guName : ''
              }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM">
              {{ proWorkOrder.workOrderBom }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="BOM版本" :span="2">
              {{ proWorkOrder.workOrderBVersion }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">任务信息</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务编号">
              {{ form.wtaskCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务名称">
              {{ form.wtaskName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="生产单元">
              {{ form.workCellName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工艺路线">
              {{ form.prouteName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序名称">
              {{ form.procedureName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="工序编号">
              {{ form.wtaskProcedureCode }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划生产数量">
              {{ form.wtaskNum }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="实际生产数量">
              {{ form.wtaskRNum }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划开工时间">
              {{ form.wtaskStart }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="计划完工时间">
              {{ form.wtaskEnd }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="实际开工时间">
              {{ form.wtaskRStart }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="实际完工时间">
              {{ form.wtaskREnd }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="备注">
              {{ form.wtaskPDesc }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="派工信息">
          <el-descriptions :column="2" :colon="false">
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">任务派工</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="生产班组">
              {{ form.wtaskGroupName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="任务负责人">
              {{ form.wtaskManagerName }}
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="其他成员" :span="2">
              {{ proWorkPeos }}
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <el-divider>
                <div class="my-divider">质检派工</div>
              </el-divider>
            </el-descriptions-item>
            <el-descriptions-item :labelStyle="descLabelStyle" label="质检人员">
              {{ form.wtaskQcPeoName }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--    关闭按钮-->
    <MyConfirmBtnGroup :after-cancel-open-page="backPage" />
  </div>
</template>

<script>
import MyConfirmBtnGroup from '@/components/MyConfirmBtnGroup/index.vue'
import { getWorkTask } from '@/api/yyj/pro/workTask'

export default {
  name: 'WorkTaskDetail',
  components: { MyConfirmBtnGroup },
  data() {
    return {
      backPage: '/pro/workTask',
      descLabelStyle: {
        minWidth: '120px !important'
      },
      form: {},
      proWorkOrder: {},
      proWorkPeos: []
    }
  },
  created() {
    const wtaskCode = this.$route.params.wtaskCode
    this.getDetail(wtaskCode)
  },
  methods: {
    // 获取详情
    async getDetail(wtaskCode) {
      const res = await getWorkTask(wtaskCode)
      this.form = res.data
      this.proWorkOrder = res.proWorkOrder
      this.proWorkPeos = res.proWorkPeos.map(e => e.wpWorkPeoName).join(" ")
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/yyj/detail';
</style>
